<!--
  TestData - 管理页面
  
  功能描述: 
  - 数据查询: 支持多字段条件查询
  - 数据展示: 支持分页、排序的数据表格
  - 数据操作: 新增、编辑、删除操作
  - 批量操作: 支持批量删除等操作
  
  数据表: test_data
  模块: test
  权限前缀: system:test:data
  
  生成时间: 2025-09-17 10:33:20
  作者: 系统
-->
<template>
  <div class="kx-card p-4">
    <!-- 查询表单区域 -->
    <el-form :inline="true" :model="filter" class="mb-3">
      <el-form-item>
        <el-button type="primary" @click="load" v-permission="'system:test:data:list'">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="success" @click="openCreate" v-permission="'system:test:data:add'">新增</el-button>
        <el-button type="danger" :disabled="!selection.length" @click="batchRemove" v-permission="'system:test:data:remove'">批量删除</el-button>
        <el-button @click="doExport" v-permission="'system:test:data:export'">导出</el-button>
        <el-upload :show-file-list="false" :on-change="onImport" accept=".xls,.xlsx" v-permission="'system:test:data:import'">
          <el-button>导入</el-button>
        </el-upload>
      </el-form-item>
    </el-form>

    <!-- 数据表格区域 -->
    <el-table :data="rows" border class="w-full" @selection-change="onSelChange">
      <el-table-column type="selection" width="48" />
      <el-table-column prop="id" label="编号" width="120" />
      <el-table-column prop="testInput" label="单行文本" />
      <el-table-column prop="testTextarea" label="多行文本" />
      <el-table-column prop="testSelect" label="下拉框" />
      <el-table-column prop="testSelectMultiple" label="下拉多选" />
      <el-table-column prop="testRadio" label="单选框" />
      <el-table-column prop="testCheckbox" label="复选框" />
      <el-table-column prop="testDate" label="日期选择" />
      <el-table-column prop="testDatetime" label="日期时间" />
      <el-table-column prop="testUserCode" label="用户选择" />
      <el-table-column prop="testOfficeCode" label="机构选择" />
      <el-table-column prop="testAreaCode" label="区域选择" />
      <el-table-column prop="testAreaName" label="区域名称" />
      <el-table-column prop="status" label="状态（0正常 1删除 2停用）" />
      <el-table-column prop="remarks" label="备注信息" />
      <el-table-column label="操作" width="240">
        <template #default="{ row }">
          <el-button size="small" @click="openEdit(row)" v-permission="'system:test:data:edit'">编辑</el-button>
          <el-button size="small" type="danger" @click="remove(row)" v-permission="'system:test:data:remove'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="mt-3 flex justify-end">
      <el-pagination
        background
        layout="prev, pager, next, sizes, total"
        :current-page="query.current"
        :page-size="query.size"
        :total="total"
        @current-change="(p:number)=>{query.current=p;load()}"
        @size-change="(s:number)=>{query.size=s;load()}"
      />
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="编号" v-if="form.id">
            <el-input v-model="form.id" disabled />
        </el-form-item>
        <el-form-item label="单行文本">
            <el-input v-model="form.testInput" />
        </el-form-item>
        <el-form-item label="多行文本">
            <el-input v-model="form.testTextarea" />
        </el-form-item>
        <el-form-item label="下拉框">
            <el-input v-model="form.testSelect" />
        </el-form-item>
        <el-form-item label="下拉多选">
            <el-input v-model="form.testSelectMultiple" />
        </el-form-item>
        <el-form-item label="单选框">
            <el-input v-model="form.testRadio" />
        </el-form-item>
        <el-form-item label="复选框">
            <el-input v-model="form.testCheckbox" />
        </el-form-item>
        <el-form-item label="日期选择">
            <el-date-picker v-model="form.testDate" type="datetime" />
        </el-form-item>
        <el-form-item label="日期时间">
            <el-date-picker v-model="form.testDatetime" type="datetime" />
        </el-form-item>
        <el-form-item label="用户选择">
            <el-input v-model="form.testUserCode" />
        </el-form-item>
        <el-form-item label="机构选择">
            <el-input v-model="form.testOfficeCode" />
        </el-form-item>
        <el-form-item label="区域选择">
            <el-input v-model="form.testAreaCode" />
        </el-form-item>
        <el-form-item label="区域名称">
            <el-input v-model="form.testAreaName" />
        </el-form-item>
        <el-form-item label="状态（0正常 1删除 2停用）">
            <el-input v-model="form.status" />
        </el-form-item>
        <el-form-item label="备注信息">
            <el-input v-model="form.remarks" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
/**
 * TestData - Vue组件逻辑
 * 
 * 组件功能:
 * - 数据查询与展示
 * - 新增、编辑、删除操作
 * - 分页功能
 * - 导入导出功能 (如果启用)
 * 
 * 
 * 依赖的API:
 * - getTestDataPage: 分页查询
 * - saveTestData: 新增
 * - updateTestData: 更新
 * - deleteTestData: 删除
 * 
 * @author 系统
 * @since 2025-09-17 10:33:20
 */
import { ref, reactive, onMounted } from 'vue'
import { listTestData, getTestData, createTestData, updateTestData, deleteTestData, batchDeleteTestData, exportTestData, importTestData } from '@/api/test/TestData'
import { ElMessage } from 'element-plus'

// ========== 数据查询相关 ==========
const query = reactive({ current: 1, size: 10 }) // 分页查询参数
const filter = reactive<any>({}) // 筛选条件
// 字典与自定义属性（由后端/全局字典中心填充）
const dictOptions = reactive<Record<string, any[]>>({}) // 下拉选项数据
const uiProps = reactive<Record<string, any>>({}) // UI组件配置
const rows = ref<any[]>([]) // 表格数据
const total = ref(0) // 数据总数
const selection = ref<any[]>([]) // 表格选中项

// ========== 对话框相关 ==========
const dialogVisible = ref(false) // 对话框显示状态
const dialogTitle = ref('') // 对话框标题
const form = reactive<any>({ id: null }) // 表单数据

function onSelChange(sel:any[]) { selection.value = sel || [] }

async function load() {
  const resp:any = await listTestData(query as any, filter)
  if (resp?.success) {
    rows.value = resp.data?.records || []
    total.value = resp.data?.total || 0
  }
}

function reset() {
  Object.keys(filter).forEach(k=> delete (filter as any)[k])
  query.current = 1
  load()
}

function openCreate() {
  // 完全重置表单，清空所有字段
  Object.keys(form).forEach(k => delete (form as any)[k])
  form.id = null
  dialogTitle.value = '新增'
  dialogVisible.value = true
}

function openEdit(row:any) {
  Object.assign(form, row)
  dialogTitle.value = '编辑'
  dialogVisible.value = true
}

async function submit() {
  const api = form.id ? updateTestData : createTestData
  const resp:any = await api(form)
  if (resp?.success) {
    ElMessage.success('已保存')
    dialogVisible.value = false
    load()
  }
}


async function remove(row:any) {
  await deleteTestData(row.id)
  ElMessage.success('已删除')
  load()
}

async function batchRemove() {
  const ids = selection.value.map(r=>r.id)
  if (!ids.length) return
  await batchDeleteTestData(ids)
  ElMessage.success('已删除')
  load()
}

function doExport() {
  exportTestData()
}

async function onImport(file:any) {
  const f = file.raw as File
  const resp:any = await importTestData(f)
  if (resp?.success) {
    ElMessage.success(`导入成功：${resp.data}`)
    load()
  }
}

onMounted(load)
</script>

<style scoped>
</style>


